<script setup lang="ts">
import {
  Download,
  Edit,
  Upload,
  View,
} from '@element-plus/icons-vue'
import SearchForm from './components/SearchForm.vue'
import useReportComponent, {
  type CurrentReportStatus,
} from './useReportComponent'
import { TIDS } from './types'
import TableLists from '@/components/TableLists/TableLists.vue'
import FullscreenModal from '@/components/FullscreenModal/FullscreenModal.vue'
import { uuid } from '@/utils'
import type { TableColumn } from '@/types'

interface TableList {
  id: string | number
  tName: string
  tId: number
  /** 是否可查看 */
  viewable?: boolean
  /** 是否可编辑 */
  editable?: boolean
  /** 是否可导入 */
  uploadable?: boolean
  /** 是否可导出 */
  downloadable?: boolean
}

const loading = ref(true)
const lists = ref<TableList[]>([])
const columns: TableColumn<TableList> = [
  { key: uuid(), label: '报表ID', prop: 'tId', width: 100 },
  {
    key: uuid(),
    label: '报表名称',
    prop: 'tName',
    align: 'left',
  },
] as any

const current: CurrentReportStatus = reactive({
  tId: 0,
  isView: false,
  isEdit: false,
})
const query = ref({
  name: '',
  year: `${new Date().getFullYear()}`,
})
const visible = ref(false)
const { component: reportComponent }
  = useReportComponent(current)

async function clickRowView(row: TableList) {
  current.tId = row.tId
  current.isEdit = false
  current.isView = true

  await nextTick()
  visible.value = true
}
async function clickRowEdit(row: TableList) {
  current.tId = row.tId
  current.isEdit = true
  current.isView = false

  await nextTick()
  visible.value = true
}
async function clickRowImport(row: TableList) {
  console.log(row)
}
async function clickRowExport(row: TableList) {
  console.log(row)
}

function request(params: any): Promise<TableList[]> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(
        [
          {
            id: uuid(),
            tId: TIDS.ORGANIZATIONAL_BLOCK_DIAGRAM,
            tName: '本单位基本情况和组织机构设置框图',
            uploadable: false,
          },
          {
            id: uuid(),
            tId: TIDS.SELF_REPORT_SURVEYS,
            tName: '能源计量工作自查报告',
            viewable: false,
          },
          {
            id: uuid(),
            tId: TIDS.MANAGEMENT_SYSTEM,
            tName: '能源计量管理制度',
            viewable: false,
          },
          {
            id: uuid(),
            tId: TIDS.STATISTICAL_REPORT,
            tName:
              '审查期内的能源统计报表，以及根据实际情况提供能源审计报告、能源平衡测试报告、能源效率限额对标报告和节能降耗改造技术报告等',
            viewable: false,
          },
          {
            id: uuid(),
            tId: TIDS.PERSONNEL_LIST,
            tName: '能源计量人员一览表及任职证明文件',
            editable: true,
          },
          {
            id: uuid(),
            tId: TIDS.LIST_OF_MAJOR_ENERGY_USING_EQUIPMENT,
            tName: '主要用能设备一览表',
            editable: true,
          },
          {
            id: uuid(),
            tId: TIDS.LIST_OF_MEASURING_INSTRUMENTS,
            tName: '能源计量器具一览表',
            uploadable: false,
          },
          {
            id: uuid(),
            tId: TIDS.LIST_OF_ENERGY_MEASURING_INSTRUMENTS_FOR_UNIT_ENERGY_USE_IN_AND_OUT,
            tName: '进出用能单位能源计量器具一览表分表',
            editable: true,
          },
          {
            id: uuid(),
            tId: TIDS.ENTRY_AND_EXIT_OF_MAJOR_SECONDARY_UNIT_ENERGY_METERING_INSTRUMENTS,
            tName:
              '进出主要次级用能单位能源计量器具一览表分表',
            editable: true,
          },
          {
            id: uuid(),
            tId: TIDS.LIST_OF_ENERGY_MEASURING_INSTRUMENTS_FOR_MAJOR_ENERGY_USING_EQUIPMENT,
            tName: '主要用能设备能源计量器具一览表分表',
            editable: true,
          },
          {
            id: uuid(),
            tId: TIDS.LIST_OF_OTHER_ENERGY_MEASURING_INSTRUMENTS,
            tName: '其他能源计量器具一览表分表',
            editable: true,
          },
          {
            id: uuid(),
            tId: TIDS.STATISTICAL_SUMMARY_OF_ENERGY_METERING_EQUIPMENT,
            tName: '能源计量器具配备情况统计汇总表',
            editable: true,
          },
          {
            id: uuid(),
            tId: TIDS.STATISTICAL_SUMMARY_OF_ACCURACY_GRADES_OF_ENERGY_METERING_INSTRUMENTS,
            tName: '能源计量器具准确度等级统计汇总表',
            editable: true,
          },
          {
            id: uuid(),
            tId: TIDS.ANNUAL_ENERGY_PURCHASES,
            tName: '年度能源购进、消费与库存情况表',
            editable: true,
          },
          {
            id: uuid(),
            tId: TIDS.ENERGY_FLOW_DIAGRAM,
            tName: '能源流向图',
          },
          {
            id: uuid(),
            tId: TIDS.METERING_COLLECTION_POINT_NETWORK_DIAGRAM,
            tName: '能源计量器具配备及计量采集点网络图',
          },
          {
            id: uuid(),
            tId: TIDS.SELF_VERIFICATION_OF_ENERGY_MEASURING_INSTRUMENTS,
            tName:
              '能源计量器具自行检定/校准的有关检定装置量值传递/溯源框图',
          },
          {
            id: uuid(),
            tId: TIDS.ENERGY_MEASURING_INSTRUMENTS_QUANTITY_VALUE_TRANSFER,
            tName: '能源计量器具量值传递/溯源框图',
          },
        ].filter(v => v.tName.includes(params.name)),
      )
    }, 300)
  })
}

async function queryLists() {
  const params = {
    ...unref(query),
  }

  loading.value = true
  try {
    const data = await request(params)
    if (data) {
      lists.value = data.filter((v) => {
        return (
          !params.name || v.tName.includes(params.name)
        )
      })
    }
  }
  finally {
    loading.value = false
  }
}
async function clickSearch() {
  queryLists()
}

async function backHandler() {
  visible.value = false
}

onMounted(() => {
  queryLists()
})
</script>

<template>
  <div
    class="padding-sm flex-direction relative flex container"
  >
    <TableLists
      :loading="loading"
      :lists="lists"
      :columns="(columns as any)"
      :operate-width="200"
      operate-align="left"
    >
      <template #actions>
        <SearchForm v-model="query" @search="clickSearch" />
      </template>
      <template #operate="{ row }">
        <template v-if="row.viewable !== false">
          <TdButton
            title="查看"
            :icon="View"
            type="primary"
            @click="clickRowView(row)"
          />
        </template>
        <template v-if="row.editable">
          <TdButton
            title="填报"
            :icon="Edit"
            type="primary"
            @click="clickRowEdit(row)"
          />
        </template>
        <template v-if="row.uploadable !== false && false">
          <TdButton
            title="导入"
            :icon="Upload"
            type="danger"
            @click="clickRowImport(row)"
          />
        </template>
        <TdButton
          title="导出"
          :icon="Download"
          type="primary"
          @click="clickRowExport(row)"
        />
      </template>
    </TableLists>

    <FullscreenModal v-model="visible">
      <component
        :is="reportComponent"
        :readonly="current.isView"
        :data-time="query.year"
      >
        <template #title="scoped">
          <ElPageHeader
            class="margin-bottom-sm"
            title="返回"
            @back="backHandler"
          >
            <template #content>
              <span>{{ scoped.title }}</span>
            </template>
            <template v-if="current.isEdit" #extra>
              <ElButton
                type="primary"
                @click="() => scoped.saveStage()"
              >
                保存
              </ElButton>
            </template>
          </ElPageHeader>
        </template>
      </component>
    </FullscreenModal>
  </div>
</template>
